<script>
import { defineAsyncComponent, resolveComponent, h, ref, onMounted } from "vue";
import Loading from "../components/loading.vue";
import Errorc from "../components/error.vue";

export default {
  setup() {
    const com = resolveComponent("Quan");
    console.log(com);
    const zi = ref(0);
    const todo = (a) => {
      console.log(a);
    };
    const chuan = ref("父组件传下去的值");
    onMounted(()=>{
      setTimeout(() => {
        chuan.value = "1111"
      }, 5000);
    })
    const change = () => {
      console.log(chuan.value);
      chuan.value = "已修改";
    };
    const asyncModal = defineAsyncComponent(() =>
      import("../components/asyncComponent.vue")
    );

    const xxx = defineAsyncComponent({
      loader: () => import("../components/asyncComponent.vue"),
      delay: 3000,
      timeout: 2000,
      loadingComponent: Loading,
      errorComponent: Errorc,
    });

    return {
      asyncModal,
      xxx,
      chuan,
      todo,
      change,
      zi,
      com,
    };
  },
  render() {
    return (
      <>
        <div>不带选项的异步组件</div>
        {h(this.asyncModal, { chuan: this.chuan, onTodo: this.todo })}
        <button onClick={() => this.change()}>修改</button>
        <hr />
        <div>带选项的异步组件</div>
        {h(this.xxx)}
        <hr />
        {h(this.com)}
      </>
    );
  },
};
</script>